<template>
  <Modal v-model="prop.showDialog" :closable="false" footer-hide width="800px">
    <div class="content">
      <div class="left">
        <h3>张三医生排班详情</h3>
        <h4>2021年1月5日</h4>
        <h5>周三</h5>
        <br />
        <h4>上午</h4>
        <h5>接诊时间: 8:00-12:00</h5>
        <h5>号源数: 0</h5>
        <h5>接诊人数: 0</h5>
        <br />
        <h4>下午</h4>
        <h5>接诊时间: 14:00-18:00</h5>
        <h5>号源数: 20</h5>
        <h5>接诊人数: 0</h5>
      </div>
      <div class="right">
        <div class="right-top">
          <Select v-model="model1" style="width: 200px" @change="handleMonthChange">
            <Option v-for="(item, index) in months" :value="item" :key="index">{{ item }}</Option>
          </Select>
          <div class="btn-box">
            <button class="btn1">设置排班</button>
            <button class="btn2" @click="close">关闭预约</button>
          </div>
        </div>
        <!-- 日历 -->
        <Calendar v-model="value" :cell-height="87" hide-type :show-header="false" style="transform: scale(0.8); transform-origin: top left;">
          <template #month="{date, data}">
            <div>
              <Badge status="warning" text="号源20" v-if="data.day === '2019-09-11'" />
              <Badge status="success" text="号源20" v-if="data.day === '2019-09-13'" />
              <Badge status="error" text="号源20" v-if="data.day === '2019-10-01'" />
            </div>
          </template>
        </Calendar>
      </div>
    </div>
  </Modal>
</template>
<script setup>
import { ref } from 'vue'
const prop = defineProps({
  showDialog: {
    type: Boolean,
    default: false,
  },
})
const model1 = ref('1月')
const months = ref([
  '1月',
  '2月',
  '3月',
  '4月',
  '5月',
  '6月',
  '7月',
  '8月',
  '9月',
  '10月',
  '11月',
  '12月',
])
const value = ref('2019-09-01')

const handleMonthChange = (month) => {
  const monthNumber = months.value.indexOf(month) + 1
  const formattedMonth = monthNumber.toString().padStart(2, '0')
  value.value = `2025-${formattedMonth}-01`
}
const emit = defineEmits(['close'])
const close = ()=>{
  console.log("prop",!prop.showDialog)
  emit('close',!prop.showDialog)
}

</script>
<style scoped>
.hide{
  opacity: 0;
}
.show{
  opacity: 1;
}
.content {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-between;
}
.left {
  width: 30%;
  background-color: #fd943f;
  color: #fff;
  height: 500px;
  padding: 20px;
  box-sizing: border-box;
}
.right {
  width: 68%;
}
.right-top {
  display: flex;
  justify-content: space-between;
}
.btn-box {
  display: flex;
}
.btn1,
.btn2 {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  /* margin-top: 20px; */
  border: none;
  border-radius: 5px;
  background-color: #b5c9ec;
  color: #1d6aee;
  font-weight: bold;
}
.btn1 {
  margin-left: 130px;
  margin-right: 15px;
  background-color: #1d6aee;
  color: #fff;
}
</style>